<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>建材资讯</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/toastr.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
        /*//头部*/
        body {
            font-size: 14px;
        }

        header{
            width: 100%;
            background: #fff;
            position: relative;
            z-index: 9;
        }
        .header-top{
            line-height: 45px;
            height: 45px;
        }
        header .aui-iconfont{
            position: absolute;
        }
        .aui-icon-left{
            padding-left:10px;
        }
        .win_title{
            width: auto;
            text-align: center;
            position: absolute;
            right: 80px;
            left: 80px;
        }
        .aui-list-view i.aui-iconfont{
            color: #bdb9b9;
        }
        .aui-list-view i.aui-iconfont{
            margin-right: 0px;
        }
        .info{
            margin-top: 15px;
        }
        .info span{
            float: right;
            color: #676767;
        }
        .num{
            margin-right: 15px;
        }
        .aui-list-view .aui-img-object{
            max-width: 75px;
            height: 75px;
            line-height: 60px;
        }
    </style>
</head>
<body>
<header class=" aui-border-b">
    <div class="header-top aui-border-b">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="win_title aui-ellipsis-1">
            建材资讯
        </div>
    </div>
</header>
<div class=" contain">
    <div class="wrapper">
        <div id="scroller-pullDown">
                <span class="aui-iconfont aui-icon-refresharrow downIcon">
                </span>
            <span id="pullDown-msg" class="pull-down-msg ">下拉刷新</span>
        </div>
        <ul class="aui-list-view">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body aui-ellipsis-2">
                    图文列表图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
                </div>
                <div class="info ">
                    <span class="time">2016-12-1</span>
                    <span class="num"><i class="aui-iconfont aui-icon-attention"></i>564</span>
                </div>
            </li>
        </ul>
        <div id="scroller-pullUp">
            <i class="aui-iconfont aui-icon-refresharrow upIcon"></i>
            <span id="pullUp-msg" class="pull-up-msg"> 上拉刷新</span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/iscroll2.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/toastr.js"></script>
<script type="text/javascript">

    $(function () {
//        垂直滚动
        scrollV();
    })
    //    垂直滚动
    //下拉刷新
    function scrollV() {
        $(".contain").height($("body").height()-$("header").innerHeight());
        myScrollV=new IScroll(".contain",{
            probeType:3,
            click:true
        })

        if(myScrollV.maxScrollY<0){
            $("#scroller-pullUp").css({"display":"block"})
        }
        var upIcon = $(".downIcon"),
            downIcon = $(".upIcon");
        myScrollV.on("scroll",function(){
            var y = this.y,
                maxY = this.maxScrollY - y,
                downHasClass = downIcon.hasClass("reverse_icon"),
                upHasClass = upIcon.hasClass("reverse_icon");
            if(y >= 40 && !downHasClass){
                $(".downIcon").addClass("turnUp");
                downIcon.addClass("reverse_icon");
                $(".pull-down-msg").text("松手刷新");
                return "";
            }else if(y < 5 && downHasClass){
                $(".downIcon").removeClass("turnUp");
                downIcon.removeClass("reverse_icon");
                $(".pull-down-msg").text("下拉刷新");
                return "";
            }

            if(maxY >= 40 && !upHasClass){
                $(".upIcon").addClass("turnDown");
                upIcon.addClass("reverse_icon");
                $(".pull-up-msg").text("松手刷新");
                return "";
            }else if(maxY < 5 && upHasClass){
                $(".upIcon").removeClass("turnDown");
                upIcon.removeClass("reverse_icon");
                $(".pull-up-msg").text("上拉刷新");
                return "";
            }
        });

        myScrollV.on("slideDown",function(){
            //下拉刷新
            if(this.y > 40){
                //添加数据

                myScrollV.refresh();
                toastr.success("下拉数据加载成功");
            }
        });

        myScrollV.on("slideUp",function(){
            //上拉刷新
            if(this.maxScrollY - this.y > 40){
                //添加数据
                myScrollV.refresh();
                toastr.success("上拉数据加载成功");
            }
        });

    }
</script>
</html>
